<template>
	<view class="content">
		<view>
			<u-navbar :background="{background: '#09C15F'}" height='100' :is-back="false">
				<view style="width: 100vw;">
					<view class="nav-address">
						<!-- <image class="address-icon" src="../../static/mipmap-xhdpi/dingwei.png"></image> -->
						<image class="address-icon" src="../../static/person/weizhi.png"></image>
						<view class="address-name">{{merchant?merchant.name:'未选择'}}</view>
						<image class="arrow" src="../../static/person/xiangxiajiantou(1).png"></image>
						<!-- <image class="arrow" src="../../static/chooseShop/jiantou-xia.png"></image> -->
					</view>
					<view class="wrap-search">
						<view class="search" @click="intoSearch">
						  <view class="search-btn">
						    <view style="display: flex;align-items: center;">
								<icon class="search-icon" type="search" size="12"/>
								<text>搜索商品名称</text>
							</view>
						  </view>
						</view>
						<!-- <uni-search-bar placeholder="搜索商品名称" bgColor="#fbfbfb" @confirm="search"></uni-search-bar> -->
						<!-- <view style="width: calc(100vw - 20px); height: 45px;border-radius: 10px;border: 1px solid #EEEEEE;margin-left: 10px;"></view> -->
					</view>
				</view>
			</u-navbar>
		</view>

		<!-- 轮播图 -->
		<view class="wrap" v-if="imgList.length>0">
			<u-swiper @click="swiperChange" :list="imgList" name="img_url" :effect3d="imgList.length>2" indicator-pos="bottomCenter"></u-swiper>
		</view>

		<!-- 分类 -->
		<view class="function_area">
			<view class="area-item" v-for="(item,index) in buttonList" :key="index" @click="toGoodList(item,index)">
				<image :src="item.img_url" style="width: 78rpx;height: 70rpx;"></image>
				<view class="title">{{item.title}}</view>
			</view>
		</view>

		<!-- 优惠券 -->
		<navigator v-if="couponList.length>0" hover-class="none" url="../coupon/coupon_list">
			<view class="advertisement">
			    <image style="width: 100%;height: auto" src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/yaojike2020/images/other/coupon_banner.jpg" mode="widthFix"/>
			</view>
		</navigator>

		<!-- 特惠 -->
		<view class="preferential" v-for="(item,index) in indexAreaList" :key="index">
			<view class="spec-background" v-if="item.medicine_info.length>0">
				<view style="display: flex;justify-content:space-between;padding: 12px 19px 8px;color: white;">
					<view style="display: flex;flex-direction: column;">
						<text style="font-size: 16px;">{{item.name}}</text>
						<!-- <text style="font-size: 14px;">{{item.name}}</text> -->
					</view>
					<view style="display: flex;align-items: center;">
						<view @click="toShopGoodsList(item.id,item.name)" style="border: 1px solid #FFFFFF;padding: 5px;border-radius: 15px;font-size: 14px;">进去逛逛</view>
					</view>
				</view>
				<view class="page-section-spacing">
					<scroll-view class="scroll-view_H" scroll-x="true">
						<!-- 遍历 -->
						<view class="scroll-view-item_H" v-for="(goodsItem,goodsIndex) in item.medicine_info" :key="goodsIndex" @click="toGoodsDetail(goodsItem.id)">
							<image class="item-img" :src="goodsItem.thumb_url?goodsItem.thumb_url:errImgUrl"></image>
							<view class="no-wrap">{{goodsItem.name}}</view>
							<view style="display: flex;justify-content: space-between;padding: 5px;font-size: 16px;">
								<view style="color: red;">￥{{goodsItem.selling_price}}</view>
								<image @click.stop="showCartModal(goodsItem.id)" style="width:20px;height: 20px;" src="../../static/mipmap-xhdpi/plus.png"></image>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>

		<!-- <view class="coupon">
			<image mode="widthFix" src="../../static/person/coupon.jpg"></image>
		</view> -->

		<!--推荐-->
		<view class="recommend-list">
		  <view class="recommend-list-title">
		    为您推荐
		  </view>
		  <view class="null" v-if="recommendData.length==0">
		    暂无热门推荐商品~~
		  </view>
		  <view class="recommend-item" v-for="(item,index) in recommendData" :key="index"  @click="toGoodsDetail(item.id)">
		    <view class="item-img">
		      <image :src="item.thumb_url?item.thumb_url:errImgUrl" mode="widthFix"/>
		    </view>
		    <view class="item-right">
		      <view class="item-des">{{item.name}}</view>
		      <!-- <view class="item-info">{{item.desc}}</view> -->
		      <view class="price">
		        <span>￥{{item.selling_price}}</span>
		        <image @click.stop="showCartModal(item.id)" class="img" src="../../static/mipmap-xhdpi/plus.png" />
		        <view class="img-icon" v-if="item.shop_cart_num>0">{{item.shop_cart_num}}</view>
		      </view>
		    </view>
		  </view>
		  <view class="null" v-if="recommendData.length>0">
		  	<u-loadmore bg-color='#F9F9F9' color='#B5B5B5' :status="loadingStatus" :icon-type="iconType" :load-text="loadText" />
		  </view>
		</view>

		<cart-dialog :showModal="showModal" :goodsId="id" @hideCartModal="hideCartModal"></cart-dialog>

		<view class="contact-icon" v-if="userToken">
			<button open-type="contact"
					:session-from="'udesk|'+nickname+'|'+photo_url+'|customer^'+customer_info_str"
					@contact="contactCallBall">
				<img mode="widthFix" src="../../static/home/contact_icon.png" />
			</button>
		</view>
		<view class="contact-icon" v-else>
			<button open-type="getUserInfo" @getuserinfo="bindGetUserInfo">
				<img mode="widthFix" src="../../static/home/contact_icon.png" />
			</button>
		</view>

	</view>
</template>
<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	import cartDialog from '@/components/cart-dialog/cart-dialog.vue'
	export default {
		data() {
			return {
				merchant: '',
				imgList:  [],//轮播图
				buttonList: '',//功能区按钮
				/* scrollTop: 0,
				old: {
					scrollTop: 0
				}, */
				merchantMedicineList:[],
				specMerchantMedicineList: [],
				recommendData: [],
				goodsDetail: '',
				classifyIndex: -1,
				classifyId: '',
				id: '',
				num: '',
				showModal: '',
				errImgUrl: this.$errorImgUrl,//找不到图片的URL
				total: '',
				page: 1,
				loadingStatus: 'loading',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				indexAreaList: [],
				areaMerchantList: [],
				tempMerchantId: '',//判断店铺是否更新的标志
				couponList: [],
				userToken: '',
				nickname: '',
				photo_url: '',
				customer_info_str: '',
				share_merchant_id: '', //通过扫二维码进来获取的门店ID
				isOnLoad: false, //判断onLoad是否执完行了
				invited_user_id:""  //邀请人id
			}
		},
		components: {
			uniNavBar,
			uniSearchBar,
			cartDialog
		},
		onPullDownRefresh() {
			this.getMerchantByQrCode(1)
			this.getBanner();
			this.getIndexButtonList();
			this.page = 1;
			this.getRecommendMedicineList();
			this.getIndexAreaList();
			this.getCouponList()
			
		},
		onReachBottom() {
			if(this.loadingStatus=="loading"||this.total==this.recommendData.length){
				return
			}
			this.page = this.page+1;
			this.getRecommendMedicineList();
		},
		onShow(){
			this.getCurrentMerchant();
			this.getUserInfos()
		},
		onLoad(options) {
			let scene = decodeURIComponent(options.scene)
			if(options.user_id){
				this.invited_user_id = options.user_id
				wx.setStorageSync("invited_user_id",this.invited_user_id)
			}
			if (scene && scene !== 'undefined' && scene !== undefined) {
				let merchant_id = (scene.split('='))[1]
				wx.setStorageSync("share_merchant_id",merchant_id)
				wx.setStorageSync("merchant",{merchant_id: merchant_id})
				this.getMerchantByQrCode(merchant_id)
			}
		},
		onShareAppMessage() {
			return {
				path:'/pages/index/index?user_id='+wx.getStorageSync("user_id")
			}
		},
		methods: {

			//获取当前商店
			getCurrentMerchant() {
				let merchant = wx.getStorageSync("merchant")
				//设置客服信息
				let customer_info = {
					"custom_fields":{
						"TextField_3080": merchant.merchant_id,
					}
				}
				this.customer_info_str = JSON.stringify(customer_info)

				//判断门店是否存在
				if(!merchant){
					this.getMerchantByQrCode(1)
					/* wx.showToast({
						icon: 'none',
						title: '请选择店铺',
						duration: 1500
					})
					setTimeout(()=>{
						wx.navigateTo({
							url: '../chooseShop/chooseShop'
						})
					},1500) */
				} else {
					this.merchant = merchant;
					if(merchant.merchant_id!=this.tempMerchantId){
						this.tempMerchantId = merchant.merchant_id;
						this.getBanner();
						this.getIndexButtonList();
						this.page = 1;
						this.getRecommendMedicineList();
						this.getIndexAreaList();
						this.getCouponList()
					}
				}
			},

			//获取通过二维码进来的店铺信息
			async getMerchantByQrCode(id) {
				let res= await this.$api.getMerchantList({
					merchant_id: id
				},this.$baseUrl)
				if(res.data.level==="success"){
					let merchant = res.data.data[0]
					if(!merchant){
						return
					}
					this.merchant = merchant
					wx.setStorageSync("merchant",merchant)
				}
				this.getCurrentMerchant()
			},

			//进入选择商店页面
			intoChooseShop() {
				uni.navigateTo({
					url: '../chooseShop/chooseShop'
				})
			},

			//进入搜索页面
			intoSearch() {
				uni.navigateTo({
					url: '../search/search'
				})
			},

			//获取轮播图
			async getBanner(){
			  let res=await this.$api.getBannerList({
				  merchant_id: this.merchant.merchant_id
			  },this.$baseUrl);
			  if(res.data.level=='success'){
			    this.imgList=res.data.data;
			    wx.stopPullDownRefresh()
			  }
			},

			//获取首页功能区按钮
			async getIndexButtonList(){
			  let res=await this.$api.getIndexButtonList({
				  merchant_id: this.merchant.merchant_id
			  },this.$baseUrl);
			  if(res.data.level=='success'){
			    this.buttonList=res.data.data;
			    wx.stopPullDownRefresh()
			  }
			},

			//优惠券列表
			async getCouponList(){
			    let userToken=uni.getStorageSync('userToken');
			    let res=await this.$api.getCouponList({
			    	merchant_id: this.merchant.merchant_id,
			    	page: 1,
					user_token: userToken
			    },this.$baseUrl);
			    if(res.data.level=='success'){
			        this.couponList = res.data.data
			    }
			},

			//获取商店商品
			async getMerchantMedicineList(id,merchantId,index){
			  let res=await this.$api.getMerchantMedicineList({
				  merchant_id: merchantId,
				  area_id: id,
				  page: 1
			  },this.$baseUrl);
			  if(res.data.level=='success'){
			    /*this.areaMerchantList = this.areaMerchantList.concat(res.data.data)*/
				  this.indexAreaList[index].medicine_info = res.data.data.medicine_info
				  this.$set(this.indexAreaList,index,this.indexAreaList[index]) //刷新视图
			  } else{
				  uni.showToast({
				  	title: res.data.message,
					icon: 'none',
					duration: 1500
				  })
			  }
			},

			//获取推荐商品
			async getRecommendMedicineList(){
			  this.loadingStatus = 'loading';
			  let res=await this.$api.getMerchantMedicineList({
				  merchant_id: this.merchant.merchant_id,
				  limit: 6,
				  page: this.page
			  },this.$baseUrl);
			  if(res.data.level=='success'){
				if (res.data.level == 'success'){
					if(this.page == 1){
						this.recommendData = res.data.data.medicine_info;
					} else{
						if(res.data.data.medicine_info.length == 0){
						    this.page--;
						} else{
						    this.recommendData = this.recommendData.concat(res.data.data.medicine_info)
						}
					}
					this.total = res.data.page_info.total;
				}
				//loading状态
				if(this.recommendData.length==this.total){
					this.loadingStatus = 'nomore'
				} else{
					this.loadingStatus = 'loadmore'
				}
			  } else{
				  uni.showToast({
				  	title: res.data.message,
					icon: 'none',
					duration: 1500
				  })
			  }
			  wx.stopPullDownRefresh()
			},

			//获取首页专区
			async getIndexAreaList() {
				let res = await this.$api.getIndexAreaList( {
				  merchant_id: this.merchant.merchant_id,
				},this.$baseUrl)
				this.areaMerchantList = []
				if(res.data.level=='success'){
				  let _this = this;
				  this.indexAreaList = res.data.data;
				  if(this.indexAreaList&&this.indexAreaList.length>0){
					  this.indexAreaList.forEach((item,index) => {
						_this.getMerchantMedicineList(item.id,this.merchant.merchant_id,index)
					  })
				  }
				}
			},

			//显示购物车
			showCartModal(id){
			  this.id = id;
			  this.showModal = true;
			  wx.hideTabBar()
			},
			//隐藏购物车
			hideCartModal(){
			  this.id = ''
			  this.showModal = false;
			  wx.showTabBar()
			},

			//跳转商品列表页面
			toGoodList(item,index){
				let linkUrl = item.link_url
				if(!linkUrl){
					uni.navigateTo({
						url: '../goodsList/goodList?classifyId='+item.classify_id+'&index='+index+'&name='+item.title
					})
				} else if(linkUrl.search('http')!=-1){
					wx.navigateTo({
						url: '../out/out?url='+linkUrl
					})
				}  else{
					wx.navigateToMiniProgram({
						appId: linkUrl
					})
				}
			},

			//轮播图点击事件
			swiperChange(index) {
				let linkUrl = this.imgList[index].link_url
				wx.navigateTo({
					url: linkUrl
				})
			},

			//跳转商品详情
			toGoodsDetail(id){
			  wx.navigateTo({url:'/pages/goodsDetail/goodsDetail?id='+id})
			},

			toShopGoodsList(id,name) {
				console.log(name)
				wx.navigateTo({url:'/pages/goodsList/goodListByShop?areaId='+id+'&name='+name})
			},

			//微信授权
			async bindGetUserInfo(){
				var _this=this;
				uni.login({
					success: res =>{
						let code = res.code;
						uni.getUserInfo({
							success: async res => {
								wx.showLoading({
									title: '正在登录'
								})
								let params = {
									raw_data:res.rawData,
									signature:res.signature,
									code:code
								}
								const result = await _this.$api.wxAppLogin(params,this.$baseUrl);
								if (result.data.level == 'success'){
									uni.setStorageSync('userToken',result.data.data);
									_this.getUserInfos()
									wx.hideLoading();
									this.$currency.showToast('登录成功','success')
								} else{
									wx.hideLoading();
									wx.showToast({
										title: result.data.message,
										icon: "none",
										duration: 1500
									})
								}
							},
							fail: (res) => {
								wx.hideLoading()
							}
						})
					}
				})
			},

			//获取个人信息
			async getUserInfos(){
				let userToken=wx.getStorageSync('userToken');
				if(userToken){
					const res=await this.$api.getUserInfos({user_token:userToken},this.$baseUrl);
					if(res.data.level=='success'){
						let userInfo = res.data.data
						uni.setStorageSync('user_id',userInfo.id);
						uni.setStorageSync('wx_openid',userInfo.wx_openid);
						uni.setStorageSync('photo_url',userInfo.user_info.photo_url)
						uni.setStorageSync('nickname',userInfo.user_info.nickname)

						this.userToken = userToken
						this.merchant = wx.getStorageSync('merchant')
						//udesk获取用户信息
						if(userInfo != ""){
							this.nickname = userInfo.user_info.nickname;
							this.photo_url = userInfo.user_info.photo_url;
						}
					}
				}

			},

			contactCallBall(e) {
				console.log(e)
				if(e.detail.path){
					this.$currency.navigateTo('/pages/udeskCart/index?key='+e.detail.query.key)
				}
			},

		}
	}
</script>

<style scoped lang="scss">
	@import "../../common/css/mixin";

	.nav-address{
		width: 100%;
		display: flex;
		align-items: center;
		.address-icon{
			width: 19px;
			height: 19px;
			margin: 0 10px;
		}
		.address-name{
			max-width: 50%;
			@include ellipsis(1);
			color: #FFFFFF;
		}
		.arrow{
			width: 11px;
			height: 9px;
			margin-left: 8px;
		}
	}

	.wrap-search{
		padding-top: 10px;
		height: 50px;
	}

	.search{
	  width: calc(100vw - 20px);
	  height: 35px;
	  padding: 5px 10px;

	  .search-btn{
	    width: calc(100% - 60px);
	    position: relative;
	    padding: 0 30px;
	    height: 35px;
	    line-height: 35px;
	    border-radius: 50rpx;
	    border: 1rpx solid #eeeeee;
	    font-size: 12px;
	    color: #858585;
	    /* background: rgba(255,255,255,0.8); */
		background-color: #fbfbfb;
		display: flex;
		align-items: center;
		justify-content: center;
	    .search-icon{
	      position: relative;
	      top: 15rpx;
	      /* left: 25rpx; */
		  margin-right: 8px;
	    }
	  }
	}

	.function_area{
		display: flex;
		justify-content: left;
		flex-wrap: wrap;
		padding: 24rpx;
		.area-item{
			/* width: 48px;
			margin: 10px; */
			width: calc((100vw - 48rpx)/5);
			margin: 10px 0;
			text-align: center;
		}
		.title{
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			font-size: 24rpx;
		}
	}

	.advertisement{
	    width: calc(100vw - 24px);
		padding: 0 12px;
	    margin: 0 auto 10px auto
	}

	.preferential{
		padding: 0 12px;
		margin-bottom: 15px;
		.spec-background{
			width: 100%;
			background-image: url(../../static/home/test.png);
			background-size: 100% auto;
			background-repeat: no-repeat;
			overflow: hidden;
		}
		.no-wrap{
		  display: -webkit-box;
		  -webkit-box-orient: vertical;
		  -webkit-line-clamp: 1;
		  overflow: hidden;
		  white-space: normal;
		  font-size: 13px;
		  padding: 0 5px;
		  min-height: 13px;
		}

		.page-section-spacing {
			padding: 0 8px;
		}

		.scroll-view_H {
			white-space: nowrap;
			width: 100%
		}

		.scroll-view-item_H {
			display: inline-block;
			width: 110px;
			text-align: center;
			/* border: 1px solid #EEEEEE; */
			border-radius: 10rpx;
			margin-right: 10px;
			padding: 10px 10px 0;
			background-color: #FFFFFF;
			.item-img{
				width: 110px;
				height: 110px;
			}
		}
		.scroll-view-item_H:last-child{
			margin-right: 0;
		}
	}

	.coupon{
		padding: 12px;
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		image{
			width: calc(100% - 24px);
		}
	}

	.recommend-list{
	  @include flexWrap(flex-start,flex-start);
	  flex-direction: row;
	  justify-content: space-between;
	  width: calc(100vw - 40rpx);
	  background-color: #F9F9F9;
	  padding: 20rpx;
	  .recommend-list-title{
	    width: 100%;
		font-size: 18px;
		font-weight: bold;
	    padding: 10px 0 20px;
	  }
	  .null{
	    /* width: 100%;
	    padding: 20rpx 0;
	    text-align: center;
	    font-size: 34rpx;
	    color: #959595;
	    height: 100rpx;
	    line-height: 100rpx; */
		width: 100%;
		padding: 40rpx ;
		text-align: center;
		min-height: 40rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		color: #B5B5B5;
	  }
	  .recommend-item{
	    width: calc((100% - 100rpx)/2);
	    padding: 20rpx;
	    margin-bottom: 10px;
		border-radius: 5px;
	    overflow: hidden;
	    background: #ffffff;
	    @include flex();
	    flex-direction: column;
	    .item-img{
	      width: calc((100vw - 120rpx)/2);
	      height: calc((100vw - 120rpx)/2);
	      border-radius: 16rpx;
	      overflow: hidden;
		  display: flex;
		  align-items: center;
		  image {
			  width: calc((100vw - 120rpx)/2);
		  }
	    }
	    .item-right{
	      @include flex();
	      flex-direction: column;
	      height: 19vw;
	      width: 100%;
		  justify-content: space-between;
	      .item-des{
			color: #444444;
	        /* height: 6vw; */
	        line-height: 6vw;
	        width: 100%;
	        font-size: 15px;
	        @include ellipsis(2);
	      }
	      .item-info{
	        /* height: 6vw; */
	        line-height: 6vw;
	        width: 100%;
	        font-size: 24rpx;
	        color: #aaaaaa;
	        @include ellipsis(1);

	      }
	      .price{
	        font-size: 34rpx;
	        @include flex(flex-start,flex-end);
	        flex-direction: row;
	        height: 8vw;
	        width: 100%;
	        color: #F55D0E;
	        font-weight: bold;
	        position: relative;
	        .original{
	          font-size: 22rpx;
	          color: #707070;
	          text-decoration: line-through;
	          padding-left: 20rpx;
	        }
	        .img{
	          margin-left: auto;
	          width: 22px;
	          height: 22px;
	        }
	        .img-icon{
	          position: absolute;
	          bottom: 20rpx;
	          right: 0;
	          width: 20rpx;
	          height: 20rpx;
	          background: #e12317;
	          border-radius: 360rpx;
	          color: #ffffff;
	          font-size: 18rpx;
	          text-align: center;
	          line-height: 20rpx;
	        }
	      }
	      .sale_count{
	        position: relative;
	        font-size: 24rpx;
	        color: #b2b2b2;
	        width: 100%;
	        height: 40rpx;
	        line-height: 40rpx;
	        @include flex(flex-start);
	        .img{
	          margin-left: auto;
	          width: 40rpx;
	          height: 40rpx;
	        }
	        .img-icon{
	          position: absolute;
	          bottom: 20rpx;
	          right: 0;
	          width: 20rpx;
	          height: 20rpx;
	          background: #e12317;
	          border-radius: 360rpx;
	          color: #ffffff;
	          font-size: 18rpx;
	          text-align: center;
	          line-height: 20rpx;
	        }
	      }
	    }

	  }
	}

	/* 弹出框 */
	.mask{
	  width: 100%;
	  height: 100%;
	  position: fixed;
	  top: 0;
	  left: 0;
	  background: #000;
	  z-index: 9000;
	  opacity: 0.7;
	}
	.modalDlg{
	  width: 100%;
	  height:45%;
	  position: fixed;
	  bottom:0;
	  left: 0;
	  z-index: 9999;
	  background-color: #ffffff;
	  color: #000000;
	  padding-bottom: 40px;
	}

	.modalDlg_top{
	  padding:5px 25px 5px 10px;
	  /*padding-right:25px;*/
	  display: flex;
	  align-items: center;
	  /*border-bottom: 1px solid #eee;*/
	  height: 30%;

	}
	.modalDlg_top>img{
	  width:80px;
	  height: 80px;
	}
	.modalDlg_top_right{
	  margin-left:20px;
	  width:calc(100% - 100px);
	}
	.modalDlg_top_right_name{
	  display: flex;
	  align-items: center;
	  color
	  span{
	    @include ellipsis(3)
	  }
	}
	.modalDlg_top_right_name_tag{
	  color:purple;
	  display: inline-block;
	  width:50px;
	  text-align: center;
	  border:1px solid purple;
	  font-size: 10px;
	  border-radius: 5px;
	  margin-right:5px;
	}
	.modalDlg_top_right_name_tag+span{
	  width:200px;
	  display: inline-block;
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	}
	.modalDlo_bottom{
	  margin-left:10px;
	}
	.cart_price{
	  margin-top:15px;
	  display: flex;
	  justify-content: space-between;
	  align-items: center
	}
	.cart_price>span:nth-child(1){
	  color:red;
	}
	.modalDlo_center{
	  max-height: 50%;
	  overflow-x: hidden;
	  overflow-y: scroll;
	}
	.modalDlo_center,.modalDlo_center_tit,.modalDlo_center_classify{
	  width:100%;
	  /*max-height: 45%;*/
	}
	.modalDlo_center_classify{
	  display:flex;
	  align-items: center;
	  flex-wrap:wrap;
	  margin:10px;
	  /*padding-bottom: 50px;*/
	}
	.modalDlo_center_classify>div{
	  border:1px solid #eee;
	  padding:2.5px 5px;
	  border-radius: 5px;
	  margin-right:5px;
	  text-align: center;
	}
	.modalDlo_center_tit{
	  padding-left:10px;
	}
	.join_cart{
	  width:100%;
	  background: rgb(196, 75, 75);
	  color:#fff;
	  font-size: 20px;
	  text-align: center;
	  line-height: 40px;
	  position: absolute;
	  bottom:0;
	}
	button::after {
	  border: none;
	}
	button {
	  background-color: #fff;
	  line-height: 16px;
	  font-size: 10px;
	  border-radius:0;
	}
	/* 规格 */
	.selectClassify{
	  border:red 1px solid !important;
	  color:red;
	}

	.back{
	  background: #ffffff;
	}

	.bottom{
	  padding: 30rpx;
	  text-align: center;
	  color: #999999;
	  background: #ffffff;
	}

	.contact-icon{
		position: fixed;
		right: 0;
		bottom: 100rpx;
		background: none;
		img{
			width: 100px;
			height: auto;
		}
		button{
			width:100%;
			display: flex;
			font-size: 14px;
			justify-content: space-between;
			align-items: center;
			background: none;
			padding: 0;
		}
		button::after{
			border: none;
		}
	}

</style>
